/**
 * @author lianPf
 * @date 17-12-11
 * */
import React from 'react'
import moment from 'moment'
import { Table, Button, message, Modal } from 'antd';
import Search from '../../common/components/Search'
import searchStyle from '../../common/less/search.less'
import { fetchPost } from '../../../utils/request'
import Style from './Index.less';

import AccountList from '../../../../mock/accountList.json';
const { list } = AccountList;

class Index extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      list: [],
      orderDetailModal: {
        visible: false,
      },
      divideOrderModal: {
        visible: false,
      },

      params: {
        startDate: moment().subtract('days', 7).format('YYYY-MM-DD'),
        endDate: moment().add('days', 0).format('YYYY-MM-DD'),
        acceptNo: '',
        bizNo: '',
        queryItemType: '',
        queryItemValue: ''
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      searchParams: {
        list: [
          {
            name: '打款时间',
            type: 'range',
            key: ['startDate','endDate'],
            className: 'pr20',
            placeHolder: '',
            values: [
              moment().subtract('days', 7),
              moment().add('days', 0)
            ]
          },
          {
            name: '商户流水号',
            type: 'text',
            key: 'acceptNo',
            className: 'pr20',
            placeHolder: '请输入商户流水号',
            values: ""
          },
          {
            name: '订单号',
            type: 'text',
            key: 'bizNo',
            className: 'pr20',
            placeHolder: '请输入订单号',
            values: ""
          },
          {
            name: '个人信息',
            type: 'group',
            key: ['queryItemType','queryItemValue'],
            className: 'pr20',
            values: [{value: '',name: '请选择'}]
          },
          {
            name: '',
            type: 'searchBtn',
            key: '',
            className: 'pr20',
            value: []
          }
        ],
        api: '/settle/fund/query'
      }
    }
  }

  componentDidMount () {
    // this.setState({
    //   list,
    // })
    this.getData()
  }

  getData () {
    const { page, params } = this.state;
    const { currentPage, pageSize } = page;
    let self = this;
    // let copyState = {};
    // for(let i in params) {
    //   if(i !== 'acceptNo') {
    //     copyState[i] = params[i]
    //   }
    // }

    fetchPost(`/settle/fund/getPaymentOrderList?currentPage=${currentPage}&pageSize=${pageSize}`, params).then((res) => {
      if(res.code === 0) {
        const { page, data } = res.data;
        const { currentPage, pageSize, totalCount} = page;
        self.setState({
          list: data,
          page: {
            currentPage,
            pageSize,
            totalCount
          }
        })
      } else {
        message.error(res.msg)
        reject(res)
      }
    })

  }

  nextpage (current) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage: current
      }
    }, () => {
      this.getData();
    });
  }

  changeParams (params) {
    this.setState({
      params,
    })
  }
  searchFunc(params) {
    this.setState({
      params,
    }, () => {
      this.getData();
    })
  }


  // modal
  showModal (modalKey,data) {
    this.setState({
      [modalKey]: {
        visible: true,
        ...data,
      },
    })
  }
  handleCancel = (modalKey) => {
    this.setState({
      [modalKey]: {
        visible: false,
      }
    });
  }

  render () {
    const self = this;
    const columns = [{
        title: '商户流水号',
        dataIndex: 'acceptNo',
        key: 'acceptNo'
      },
      {
        title: '订单号',
        key: 'bizNo',
        dataIndex: 'bizNo'
      },
      {
        title: '产品',
        key: 'paymentSysName',
        dataIndex: 'paymentSysName'
      },
      {
        title: '资方',
        key: 'fundName',
        dataIndex: 'fundName'
      },
      {
        title: '用户名',
        key: 'acctName',
        dataIndex: 'acctName'
      },
      {
        title: '手机号',
        key: 'mobile',
        dataIndex: 'mobile',
      },
      {
        title: '借款金额',
        key: 'contractAmount',
        dataIndex: 'contractAmount'
      },
      {
        title: '打款金额',
        key: 'arrivalAmount',
        dataIndex: 'arrivalAmount'
      },
      {
        title: '打款时间',
        key: 'paidDate',
        dataIndex: 'paidDate'
      },
      {
        title: '操作',
        key: '',
        width: '20%',
        className: 'text-center',
        dataIndex: '',
        render: (text,record, index) => {
          const { orderDetails, flowVOList } = record;
          return (
            <div>
              <Button type="primary" onClick={()=>{this.showModal('orderDetailModal', orderDetails)}}>订单详情</Button>
              <Button className='ml5' type="default" onClick={()=>{this.showModal('divideOrderModal', {flowVOList})}}>分单详情</Button>
            </div>
          )
        }
      }
    ];

    const pagination = {
      total: this.state.page.totalCount || 0,
      pageSize: this.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: true,
      showTotal(total){
        return `Total ${total} `;
      },
      onChange(current) {
        self.nextpage(current)
      }
    };

    const orderDetailColumns = [{
      title: '期数',
      dataIndex: 'currentPeriod',
      key: 'currentPeriod'
    },{
      title: '应还日',
      dataIndex: 'repaymentDate',
      key: 'repaymentDate'
    },{
      title: '实际还款日',
      dataIndex: 'payOffDate',
      key: 'payOffDate'
    },
    ];

    const divideOrderColumns = [{
      title: '时间',
      dataIndex: 'gmtCreate',
      key: 'gmtCreate'
    },{
      title: '状态',
      dataIndex: 'statusName',
      key: 'statusName'
    },{
      title: '描述',
      dataIndex: 'acceptMessage',
      key: 'acceptMessage'
    },
    ];
    return (
      <div>
        <Modal
          title="订单详情"
          visible={this.state.orderDetailModal.visible}
          width="480"
          closable={false}
          footer={[
            <Button type="primary" onClick={() => this.handleCancel('orderDetailModal')}>
              确认
            </Button>,
          ]}
        >
          <div className={Style.modalBody}>
            <div className={Style.modalRow}>
              订单编号: <span>&nbsp;{this.state.orderDetailModal.tradeNo}</span>
            </div>
            <div className={Style.modalRow}>
              <div className={Style.inlineDiv}>
                借款金额: <span>&nbsp;{this.state.orderDetailModal.borrowTotalCapital}</span>
              </div>
              <div className={Style.inlineDiv}>
                到账金额: <span>&nbsp;{this.state.orderDetailModal.receivedTotalCapital}</span>
              </div>
            </div>
            <div className={Style.modalRow}>
              <div className={Style.inlineDiv}>
                应还金额: <span>&nbsp;{this.state.orderDetailModal.repaymentTotalCapital}</span>
              </div>
              <div className={Style.inlineDiv}>
                已还金额: <span>&nbsp;{this.state.orderDetailModal.paidTotalCapital}</span>
              </div>
            </div>
            <div className={Style.modalRow}>
              订单状态: <span>&nbsp;{this.state.orderDetailModal.tradeOrderStatusName}</span>
            </div>

            <Table pagination={false} key='name' columns={orderDetailColumns} dataSource={this.state.orderDetailModal.tradeBillVOList}
                   bordered
            >
            </Table>
          </div>
        </Modal>

        <Modal
          title="分单详情"
          visible={this.state.divideOrderModal.visible}
          width="480"
          closable={false}
          footer={[
            <Button type="primary" onClick={() => this.handleCancel('divideOrderModal')}>
              确认
            </Button>,
          ]}
        >
          <div className={Style.modalBody}>
            <Table pagination={false} size='small' key='name' columns={divideOrderColumns} dataSource={this.state.divideOrderModal.flowVOList}
                   bordered
            >
            </Table>
          </div>
        </Modal>

        <div className={searchStyle.searchClass}>
          <Search searchParams={this.state.searchParams} changeParams={(params)=>this.changeParams(params)} searchFunc={(params) => this.searchFunc(params)}/>
        </div>

        <Table pagination={pagination} key='name' columns={columns} dataSource={this.state.list} loading={this.state.loading}
               bordered
        >
        </Table>
      </div>
    )
  }
}

export default Index;
